﻿<template>
  <div
    class="dropdown"
    @click="onClick"
    @mouseover="onMouseOver"
    @mouseleave="onMouseLeave"
    v-click-away="onClickAway"
  >
    <slot />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, toRefs, reactive, provide, watch } from 'vue'
import { useDropDownStore } from '@/store/dropdown'
import { useCommonStore } from '@/store/common'

export default defineComponent({
  name: 'Dropdown',
  // emits 是 Vue 3 中用于定义组件可以触发的自定义事件及其验证规则的关键字。
  // 通过 emits，你可以明确声明组件可以发出哪些事件，并且可以为这些事件添加验证逻辑。
  //   使用场景
  //   父组件监听子组件事件：父组件可以通过 v-on 监听子组件触发的事件。
  // 事件验证：确保子组件只触发预期的事件，并且可以对事件参数进行验证。
  emits: ['command'],
  props: {
    hover: {
      type: Boolean,
      default: false
    }
  },
  setup(props, { emit }) {
    const commonStore = useCommonStore()
    const dropDownStore = useDropDownStore()
    // toRefs:
    // toRefs 是 Vue 3 中用于将一个响应式对象（如 props）转换为普通对象，其中每个属性都是一个引用（ref）。
    // 这样做的好处是可以在解构时保持响应性。如果你直接解构 props，会失去响应性，而使用 toRefs 可以确保解构后的属性仍然是响应式的。

    // ref 是 Vue 3 中用于创建一个响应式的引用对象。它包含一个 .value 属性，可以用来读取或设置该引用的值。
    const mouseHover = toRefs(props).hover
    const eventId = ref(0)
    //共享状态: 通过 provide，父组件可以将 sharedState 提供给其所有的后代组件，而不需要通过层层传递 props。
    //响应式: 使用 reactive 创建的 sharedState 是响应式的，因此任何后代组件都可以监听并响应 sharedState 的变化。
    //简化通信: 对于深层次嵌套的组件结构，依赖注入可以大大简化状态管理和组件间的通信。
    //后代组件如何使用
    //    在后代组件中，你可以使用 inject 来获取 sharedState：
    let sharedState: {active: boolean} = reactive({active: false})
    provide('sharedState', sharedState)

    watch(
      () => dropDownStore.commandName,
      (newVal, oldVal) => {
        const name = newVal ? newVal : oldVal
        if (eventId.value === dropDownStore.uid) emit('command', name)
      }
    )

    const onClick = () => {
      if (!sharedState.active) eventId.value = dropDownStore.setUid()
      if (!mouseHover.value) sharedState.active = !sharedState.active
    }
    const onClickAway = () => {
      if(!sharedState.active && !commonStore.isMobile) {
        sharedState.active = false
        eventId.value = 0
      }
    }

    const onMouseOver = () => {
      if (!sharedState.active) eventId.value = dropDownStore.setUid()
      if (!mouseHover.value) sharedState.active = true
    }

    const onMouseLeave = () => {
      if (mouseHover.value) {
        sharedState.active = false
        eventId.value = 0
      }
    }
    return {
      onClick,
      onClickAway, // 确保返回 onClickAway 方法
      onMouseOver,
      onMouseLeave,
    }
  }
})
</script>



<style scoped>

</style>